<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=utf-8>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
<title>话题树alpha</title>
<link href="images/logo.png" rel="apple-touch-icon-precomposed" />
<link href="images/startup.png" rel="apple-touch-startup-image">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfUGRCywcmTmqpLCU2ohAAPOZ4WKnlGZE&sensor=true&language=zh-CN">
</script>
<script src="map.js"></script>


</head>
<body>
    <!-- 假的引导层 -->
    <div class="guide" id="guide">
      <a class="begin"></a>
    </div>

	   <!--  地图  -->
    <div id="map_canvas">
    	
    </div>

    <!-- 首页header -->
    <div class="header">
    	寻找你的那棵树
    	<a class="publish" id="add_topic"></a>
    	<a class="camera" id="camera" href="http://360.io/PKFX68">
			<!-- <div class="filter_dropdown">
				<ul class="filter_condition" id="filter_condition">
					<li class="first"><i class="ico ico_coffee"></i><span>饮料的</span></li>
					<li><i class="ico ico_clothes"></i><span>衣服</span></li>
					<li><i class="ico ico_photo"></i><span>照片</span></li>
					<li><i class="ico ico_shopping"></i><span>购物</span></li>
					<li class="last"><i class="ico ico_more"></i><span>更多</span></li>
				</ul>
    		</div> -->
    	</a>
    </div>

    <!-- 发布话题按钮 -->
    <a class="location" id="location"></a>

    <!-- 发布话题界面 -->
    <div class="add_topic_container" id="add_topic_container">
    	<div class="head">
			<a class="button cancel" id="cancel">取消</a>
			<a class="button finish" id="publish">发布</a>
    	</div>
    	<div class="content_container">
    		<textarea id="topic_content"></textarea>
    	</div>
    	<div class="other_media">
    		<span class="text">插入：</span>
    		<i class="ico_media media_photo"></i>
    		<i class="ico_media media_video"></i>
    		<i class="ico_media media_music"></i>
    		<i class="private" id="private"></i>
    	</div>
    </div>

    <!-- 详情与评论页 -->
    <div class="details_page" id="details_page">
    	<div class="header">
        <a class="button" id="back">返回</a>
        <a class="button comment_link" id="comment_link" href="#comment_a">评论</a>
      </div>
      <div class="details_content">

        <img class="tree" id="d_tree" src="images/tree/tree_10.png"></img>
        <div class="user_info">
          <img class="avatar" id="d_avatar"></img>
          <span class="user_name" id="d_user">wikiwang</span>
          </div>  
        <div class="topic_details">
          <h3 id="d_title">话题树-发现以往有趣的事</h3>
          <img class="topic_pic" id="d_img" src="images/sample.png"></img>
          <p class="topic_desc" id="d_article">话题树让你发现此地有意思的故事，它就像一个历史档案，记录着每个地点发生过的故事。你也可以在地图上留下你的足迹，慢慢的占领这座城市，告诉别人可不要侵犯我的地盘哦！</p>  
        </div>
        <div class="comments">
          <ul class="comments_list" id="comm">
            <!-- <li>
              <img class="commenter_avatar" src=""></img>
              <p><span class="commenter_name">狄仁杰：</span><span class="comment_content">元芳，此事你怎么看？</span></p>
              <p class="datetime">10-25  17：31</p>
            </li>
            <li>
              <img class="commenter_avatar" src=""></img>
              <p><span class="commenter_name">狄仁杰：</span><span class="comment_content">元芳，此事你怎么看？</span></p>
              <p class="datetime">10-25  17：31</p>
            </li>
            <li>
              <img class="commenter_avatar" src=""></img>
              <p><span class="commenter_name">狄仁杰：</span><span class="comment_content">元芳，此事你怎么看？</span></p>
              <p class="datetime">10-25  17：31</p>
            </li> -->
          </ul>
        </div>

        <a name="comment_a"></a>
        <div class="comment_container">
          <img class="current_comments" id="d_userimg"></img>
          <textarea id="d_data"></textarea>
          <i class="ico_delete" id="d_delete"></i>
          <i class="ico_finish" id="d_finish"></i>
        </div>
      </div>
    </div>
</body>
<script>
window.onload = function () {
  var mapView = hackathon.init();

  $("#guide").click(function(){$(this).animate({left:'-100%'},1000,function(){$(this).hide()})});

  $('#filter').click(function(){$(this).toggleClass('filter_active')});
  $('#private').click(function(){$(this).toggleClass('private_active')});
  $('#add_topic').click(function(){
  	$('#add_topic_container').addClass('add_topic_container_show');
  	$('#topic_content').focus();}
  );
  $('#cancel').click(function(){$('#add_topic_container').removeClass('add_topic_container_show')});
  $('#publish').click(function(){
  	$('#add_topic_container').removeClass('add_topic_container_show');
  	mapView.postMarker($('#topic_content').val());
  	
  });
  $('#map_canvas').click(function(){$('#filter').removeClass('filter_active')});
  $('#filter_condition li').mousedown(function(){$(this).addClass('active')});
  $('#filter_condition li').mouseup(function(){$(this).removeClass('active')});

  //演示demo，jayce请看
  $('#back').click(function(){
    $('#details_page').removeClass('details_page_show');
    window.setTimeout(function(){$('#details_page').hide()},500);
  });
  //$('#camera').click(function(){$('#details_page').show(function(){$(this).addClass('details_page_show')})});
};
  // google.maps.event.addDomListener(window, 'load', map.init);
</script>

</html>